<template>
  <load v-if="isYes"></load>
  <div class="collection" v-else-if="!isYes">
    <van-nav-bar title="我的追漫" left-arrow @click-left="goBack" />
    <ul class="box">
      <li v-for="(item, index) in listData" :key="index">
        <div class="imgBox">
          <img
            :src="'https://images.weserv.nl/?url=' + item.bookImg"
            @click="goDetail(item.bookId)"
          />
        </div>
        <div class="text">{{ item.bookName }}</div>
        <div class="chapter" v-if="item.short_title ? isShow : isNoshow">
          已看到<span class="zs">{{ item.short_title }}</span>
        </div>
        <div
          class="watch"
          v-if="item.short_title ? isShow : isNoshow"
          @click="
            read(
              item.comicId,
              item.bookId,
              item.short_title,
              item.vip,
              item.index,
              item.BLength
            )
          "
        >
          继续观看
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import load from "../components/Load.vue";
export default {
  name: "Collection",
  components: {
    load,
  },
  data() {
    return {
      listData: [],
      isShow: true,
      isNoshow: false,
      isYes: true,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    //从本地存储拿收藏的数据
    getData() {
      let userData = localStorage.getItem("user");
      if (userData) {
        userData = JSON.parse(userData);
      } else {
        userData = [];
      }
      let user = sessionStorage.getItem("user");
      if (user) {
        user = JSON.parse(user);
      } else {
        user = [];
      }
      for (let i = 0; i < userData.length; i++) {
        if (userData[i].phone === user.phone) {
          this.listData = userData[i].book;
        }
      }
      setTimeout(() => {
        this.isYes = false;
      }, 3000);
      // console.log("this.listData==>", this.listData);
    },
    goDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id: id,
        },
      });
    },
    read(id, bookId, short_title, vip, index, length) {
      if (this.listData.vip) {
        this.$router.push({
          name: "Vip",
        });
      } else {
        this.$router.push({
          name: "Read",
          query: {
            bookId: bookId,
            short_title: short_title,
            id: id,
            index: index,
            length: length,
            vip: vip,
          },
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  // display: flex;
  // flex-wrap: wrap;
  li {
    // height: 100px;
    // border: 1px solid red;
    // margin-left: 18px;
    margin-top: 15px;
    .imgBox {
      // width: 100px;
      // height: 100px;
      img {
        width: 100%;
      }
    }
    .text {
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 20px;
    }
    .chapter {
      font-size: 14px;
      .zs {
        margin-left: 10px;
        color: red;
      }
    }
    .watch {
      font-size: 20px;
      width: 100px;
      height: 30px;
      margin-top: 5px;
      border: 1px solid #fb7299;
      line-height: 30px;
      text-align: center;
    }
  }
}
</style>